<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
	font-family:"Arial","微軟正黑體";
}

.specialcard{
			width: 580px;
			height:400px; 
			background: url(light/img/seasea.jpg) no-repeat; 
			background-size: 100% 100%;
			border-radius: 5%;
			box-shadow:4px 4px 12px 4px rgba(20%,20%,40%,0.3);
		}
		.specialicondiv{
			width: 100%;
			text-align: center;	
			margin-top: 0px;
		}
		/*卡片內文*/
		.card_container{
			text-align: left;
			padding: 0 5%;
			background: #fff;
			opacity: 0.8;
			border-radius: 0px;
			width: 500px;
			margin: 5% 2% 0 2%;
			float: left;
			border-radius: 5%;
		}
		.card_span{
		 	margin: 0% 0 3% 0;
		}
		.card_spantitle{
			padding-top: 5%;
		}
		.card_spanchg{
			margin-left: 60%;
		}
		.boat{	
			width: 40%;
			height: 40%;
		}
		.boat img{
			width: 150px;
			height: 150px;
		}

		.boat{
		  -webkit-animation:div-scoping  10s alternate infinite;
		  -moz-animation:div-scoping 10s alternate infinite;
		  animation:div-scoping 10s alternate infinite;

		  -webkit-animation-timing-function: linear;
		  -moz-animation-timing-function: linear;
		  animation-timing-function: linear;
		}

		@-webkit-keyframes div-scoping {
		  0% {
		    -webkit-transform: translateX(0px);
		    -moz-transform: translateX(0px);
		    transform: translateX(0px);
		  }
		  50% {
			-webkit-transform: translateX(300px);
		    -moz-transform: translateX(300px);
		    transform: translateX(300px);
		  }
		  100% {
			-webkit-transform: translateX(0px);
		    -moz-transform: translateX(0px);
		    transform: translateX(0px);
		  }
		}



</style>
</head>
<body>
	<div class="specialcard grid_6 grid_6_chg">
		<div class="card_container">
			<h3 class="card_span card_spantitle">
				<span class="">TO: example_receiver</span>
			</h3>
			<p id="preview_text">
			<h4>example_text</h4>
			</p>
			<h3 class="card_span card_spanchg">
				<span class="">From: example_sender</span>
			</h3>
			
		</div>
		<div class="boat">
				<img src="light/img/boat.png">
			</div>
	</div>
</body>
</html>